<template>
  <CloudDialog
    v-model:visible="visible"
    title="关联站点"
    :width="900"
    :loading="loading"
    :mask-closable="false"
    :footer="false"
    :before-open="handleBeforeOpen"
    :before-close="handleClose">
    <a-alert class="mb-6">
      若有失败记录请检查解析相关配置或者手动添加解析记录。</a-alert
    >
    <div style="max-height: 500px; overflow: auto">
      <a-table :columns="columns" :data="data" :pagination="false">
        <template #cname="{ record }">
          <CopyField :edit="() => open(record)">{{
            record.full_cname || '-'
          }}</CopyField>
        </template>
        <template #status="{ record }">
          {{ record.resolve_switch === 1 ? '解析' : '移除' }}
        </template>
        <template #result="{ record }">
          <TextEll>
            <span>
              {{
                getOptionsLabel(
                  siteResolveStatusOptions,
                  record.provider_rr_status
                )
              }}
            </span>
            <span v-if="record.provider_rr_status_text"
              >（{{ record.provider_rr_status_text }}）</span
            >
          </TextEll>
        </template>
      </a-table>
    </div>
    <a-pagination
      v-model:current="pagination.current"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      show-total
      show-page-size
      :page-size-options="[10, 15, 20, 30, 50]"
      class="mt-6 justify-end"
      @change="(v) => handleChange(v, pagination.pageSize)"
      @page-size-change="(v) => handleChange(1, v)" />
    <EditCname
      v-model="cnameVisible"
      :record="siteData"
      @reload="run"></EditCname>
  </CloudDialog>
</template>
<script lang="ts" setup>
import type { AreaItem } from '@/apis/model/resolve'
import EditCname from '@/components/EditCname.vue'
import { getApiResolveRegionSiteBindingsApi } from '@/apis/modules/resolve/area'
interface IProp {
  areaData?: AreaItem
}
const visible = defineModel<boolean>('visible', { required: true })
const props = withDefaults(defineProps<IProp>(), {})
const { visible: cnameVisible, open, data: siteData } = usePopup()
const queryParams = ref({
  region_id: ''
})

const columns = buildColumns([
  {
    title: '站点域名',
    dataIndex: 'site_name',
    format: 'copy'
  },
  {
    title: 'CNAME',
    dataIndex: 'full_cname',
    slotName: 'cname',
    width: 194
  },
  {
    title: '目标状态',
    slotName: 'status',
    width: 96
  },
  {
    title: '处理结果',
    slotName: 'result'
  },
  {
    title: '更新时间',
    dataIndex: 'updated_at',
    format: 'date-time',
    width: 180
  }
])

const { data, loading, run, pagination } = useListRequest(
  getApiResolveRegionSiteBindingsApi,
  {
    params: queryParams,

    immediate: false
  }
)
const handleChange = (current: number, limit: number) => {
  pagination.value.current = current
  pagination.value.pageSize = limit
  run()
}
const handleBeforeOpen = () => {
  queryParams.value.region_id = props.areaData?.id || ''
  return run()
}
const handleClose = () => {
  data.value = []
}
</script>
<style lang="less" scoped>
:deep(.arco-alert-content) {
  font-size: 14px;
}
</style>
